<template>
	<view class="profile-container">
		<!-- 用户基本信息卡片 -->
		<view class="user-card">
			<view class="user-header">
				<image class="user-avatar" :src="userInfo.avatar || '/static/avatars/default-avatar.jpg'"
					mode="aspectFill" />
				<view class="user-info">
					<text class="nickname">{{ userInfo.nickName }}</text>
					<text class="bio">个人简介：{{ userInfo.remark || '这个人很懒，什么都没写~' }}</text>
				</view>
			</view>

			<!-- 用户数据统计 -->
			<view class="user-stats">
				<view class="stat-item">
					<text class="stat-num">{{ activities ? activities.length : 0 }}</text>
					<text class="stat-label">组织活动</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{ userInfo.participateCount || 0 }}</text>
					<text class="stat-label">参加活动</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{ userInfo.jointCount || 0 }}</text>
					<text class="stat-label">共同活动</text>
				</view>
				<view class="stat-item">
					<text class="stat-num">{{ userInfo.teamCount || 1 }}</text>
					<text class="stat-label">队伍</text>
				</view>
			</view>
		</view>

		<!-- 操作面板 - 仅在查看他人主页时显示 -->
		<view class="action-panel" v-if="!isSelf">
			<view class="action-buttons">
				<view class="action-btn" :class="{ active: isLiked }" @tap="handleLike">
					<image class="action-icon" :src="isLiked ? '/static/icons/liked.png' : '/static/icons/like.png'"
						mode="aspectFit">
					</image>
					<text>{{ isLiked===1 ? '已喜欢' : '喜欢' }}</text>
				</view>
				<view class="action-btn" :class="{ active: isBlocked }" @tap="handleBlock">
					<image class="action-icon"
						:src="isBlocked ? '/static/icons/blocked.png' : '/static/icons/block.png'" mode="aspectFit">
					</image>
					<text>{{ isBlocked===1 ? '已拉黑' : '拉黑' }}</text>
				</view>
			</view>
		</view>

		<!-- 活动记录部分 -->
		<view class="activities-section">
			<view class="section-header" @tap="toggleActivities">
				<view class="header-left">
					<text class="title">最近一周发起的活动</text>
					<text class="count">({{activities ? activities.length : 0}})</text>
				</view>
				<view class="arrow" :class="{ 'expanded': showActivities }">
					<text>›</text>
				</view>
			</view>

			<view class="activity-list" v-show="showActivities">
				<template v-if="activities && activities.length > 0">
					<view class="activity-wrapper" v-for="activity in activities" :key="activity.id">
						<activity-item :activity="activity" />
						<view class="divider"></view>
					</view>
				</template>
				<template v-else>
					<view class="empty-tip">暂无活动记录</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getInfoById
	} from '@/api/system/user.js'
	import {
		listActivityByUserId
	} from '@/api/youqiu/activity'
	import {
		getFriendInfo,
		updateFriend
	} from '@/api/youqiu/friend.js'
	import ActivityItem from '@/components/activity-item/index.vue'

	export default {
		components: {
			ActivityItem
		},
		data() {
			return {
				userId: '',
				userInfo: {},
				activities: null,
				query: {
					pageNum: 1,
					pageSize: 10
				},
				showActivities: false,
				isLiked: 0,
				isBlocked: 0,
				currentUserId: '', // 当前登录用户ID
			}
		},

		computed: {
			isSelf() {
				return this.userId === this.currentUserId
			}
		},

		onLoad(options) {
			if (options.userId) {
				this.userId = options.userId
				this.getUserInfo()
				this.getActivityList()
				// 获取当前登录用户ID
				const storage_data = uni.getStorageSync('storage_data')
				if (storage_data && storage_data.vuex_user_info) {
					this.currentUserId = storage_data.vuex_user_info.userId + ""
				}
				// 获取喜欢和拉黑状态
				this.checkUserRelation()
			}
		},

		methods: {
			getUserInfo() {
				getInfoById(this.userId).then(res => {
					console.log(res)
					this.userInfo = res.data.user
				})
			},

			getActivityList() {
				uni.showLoading({
					title: '加载中...'
				})

				// 计算时间范围
				const now = new Date()
				// 获取当前日期的年月日（使用本地时间）
				const today =
					`${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`

				// 获取7天前的日期
				const sevenDaysAgo = new Date(now)
				sevenDaysAgo.setDate(now.getDate() - 7)
				const weekAgo =
					`${sevenDaysAgo.getFullYear()}-${String(sevenDaysAgo.getMonth() + 1).padStart(2, '0')}-${String(sevenDaysAgo.getDate()).padStart(2, '0')}`

				listActivityByUserId({
					userId: this.userId,
					startTime: weekAgo, // 7天前的日期
					endTime: today, // 当前日期
					orderByColumn: 'activity_time', // 按活动时间排序
					isAsc: 'desc' // 降序排列，最近的在前
				}).then(res => {
					if (res.code === 200) {
						this.activities = res.rows || null
					} else {
						uni.showToast({
							title: res.msg || '获取活动列表失败',
							icon: 'none'
						})
						this.activities = null
					}
				}).catch(err => {
					console.error('获取活动列表失败:', err)
					uni.showToast({
						title: '获取活动列表失败',
						icon: 'none'
					})
					this.activities = null
				}).finally(() => {
					uni.hideLoading()
				})
			},

			toggleActivities() {
				this.showActivities = !this.showActivities
			},

			// 检查用户关系状态
			checkUserRelation() {
				let _this = this
				if (_this.currentUserId && _this.currentUserId !== '') {
					let query = {
						userId: _this.currentUserId,
						friendId: _this.userId
					}
					getFriendInfo(query).then(res => {
						console.log('getFriendInfo', res)
						if (res.code === 200) {
							// 处理空值情况
							if (!res.data) {
								_this.isLiked = 0
								_this.isBlocked = 0
								return
							}

							_this.isLiked = res.data.isLiked ? res.data.isLiked : 0
							_this.isBlocked = res.data.isBlocked ? res.data.isBlocked : 0
						}
					})
				}
			},

			// 处理喜欢操作
			handleLike() {
				let _this = this
				let data = {
					userId: _this.currentUserId,
					friendId: _this.userId,
					isLiked: _this.isLiked === 0 ? 1 : 0,
					isBlocked: _this.isBlocked
				}
				updateFriend(data).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: _this.isLiked === 0 ? '已添加喜欢' : '已取消喜欢',
							icon: 'success'
						})
						_this.isLiked = _this.isLiked === 0 ? 1 : 0
					}
				})
			},

			// 处理拉黑操作
			handleBlock() {
				let _this = this
				uni.showModal({
					title: _this.isBlocked === 1 ? '取消拉黑' : '确认拉黑',
					content: _this.isBlocked === 1 ? '确定要取消拉黑该用户吗？' : '确定要拉黑该用户吗？',
					success: (res) => {
						if (res.confirm) {
							let data = {
								userId: _this.currentUserId,
								friendId: _this.userId,
								isBlocked: _this.isBlocked === 0 ? 1 : 0,
								isLiked: _this.isLiked
							}
							updateFriend(data).then(res => {
								if (res.code === 200) {
									uni.showToast({
										title: _this.isBlocked === 0 ? '已拉黑' : '已取消拉黑',
										icon: 'success'
									})
									_this.isBlocked = _this.isBlocked === 0 ? 1 : 0
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.profile-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 20rpx;
	}

	.user-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.user-header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.user-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 20rpx;
	}

	.user-info {
		flex: 1;
	}

	.nickname {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 10rpx;
		display: block;
	}

	.bio {
		font-size: 26rpx;
		color: #666;
		display: block;
	}

	.user-stats {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-num {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.remark-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.remark-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: #666;
	}

	.icon-arrow {
		width: 32rpx;
		height: 32rpx;
	}

	.activity-section {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.activity-list {
		max-height: 600rpx;
	}

	.activity-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.activity-item:last-child {
		border-bottom: none;
	}

	.activity-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}

	.activity-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.activity-time {
		font-size: 24rpx;
		color: #999;
	}

	.activity-info {
		display: flex;
		font-size: 24rpx;
		color: #666;
	}

	.activity-type {
		margin-right: 20rpx;
	}

	.empty-state {
		text-align: center;
		padding: 40rpx 0;
		color: #999;
		font-size: 26rpx;
	}

	.activities-section {
		margin-top: 20rpx;
		background: #fff;
		border-radius: 12rpx;
		overflow: hidden;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			background: #fff;
			position: relative;

			&:active {
				background-color: #f5f5f5;
			}

			.header-left {
				display: flex;
				align-items: center;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.count {
				font-size: 28rpx;
				color: #999;
				margin-left: 8rpx;
			}

			.arrow {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				font-size: 32rpx;
				transform: rotate(90deg);
				transition: transform 0.3s ease;

				&.expanded {
					transform: rotate(-90deg);
				}
			}
		}

		.activity-list {
			padding: 0;
			transition: max-height 0.3s ease;
			background: #fff;
			border-top: 1rpx solid #eee;
			min-height: 100rpx;
		}

		.empty-tip {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
			background: #fff;
		}

		.activity-wrapper {
			position: relative;
			transform: rotate(-5rpx);
		}

		.divider {
			height: 1rpx;
			background-color: #eee;
			margin: 0 30rpx;
		}
	}

	.action-panel {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;

		.action-buttons {
			display: flex;
			justify-content: space-around;

			.action-btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 40rpx;
				border-radius: 8rpx;

				&.active {
					background-color: #f5f5f5;

					text {
						color: #ff6b35;
					}
				}

				.action-icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 10rpx;
				}

				text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
</style>